<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/index.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
</head>
<body>

<div class="header">
	<div class="logo-con">
		<div class="logo"></div>
		<div class="settings"><a href="javascript:void(0)"><img src="images/icon-settings.png"></a></div>
	</div>
	<div class="part-menu">
		<ul>
			<li>
				<a href="javascript:void(0)" class="icon-user">
					会员管理
				</a>
			</li>
			<li class="part-menu-line"><img src="images/line.png"></li>
			<li>
				<a href="javascript:void(0)" class="icon-order">
					订单管理
				</a>
			</li>
			<li class="part-menu-line"><img src="images/line.png"></li>
			<li>
				<a href="javascript:void(0)" class="icon-logistics">
					物流管理
				</a>
			</li>
			<li class="part-menu-line"><img src="images/line.png"></li>
			<li>
				<a href="javascript:void(0)" class="icon-mark">
					积分管理
				</a>
			</li>
			<li class="part-menu-line"><img src="images/line.png"></li>
			<li>
				<a href="javascript:void(0)" class="icon-chart">
					统计报表
				</a>
			</li>
			<li class="part-menu-line"><img src="images/line.png"></li>
			<li>
				<a href="javascript:void(0)" class="icon-post">
					<i></i>
					<span>发布管理</span>
				</a>
			</li>
		</ul>
	</div>
	<div class="user-info">
		<span>当前用户： admin</span>
		<a href="####" class="change-pwd">修改密码</a>
		<a href="####" class="logout">注销</a>
		<a href="####" class="help">帮助</a>
	</div>
</div>
<div class="main">
	<table class="container">
		<tr>
			<td width="200" style="background: #E5E4ED">
				<div class="part-title">权限管理</div>
				<ul class="menu">
					<li>
						<a href="javascript:void(0)" class="open-btn open hover" type="open">
							<i class="menu-icon user"></i>
							<span class="menu-title">管理员分配</span>
							<i class="menu-icon-down"></i>
						</a>
						<ul>
							<li><a href="####">一级权限</a></li>
							<li><a href="####">二级权限</a></li>
							<li><a href="####">三级权限</a></li>
						</ul>
					</li>
					<li>
						<a href="javascript:void(0)" class="open-btn close" type="close">
							<i class="menu-icon role"></i>
							<span class="menu-title">权限设置</span>
							<i class="menu-icon-down"></i>
						</a>
						<ul style="display: none;">
							<li><a href="####">一级权限</a></li>
							<li><a href="####">二级权限</a></li>
							<li><a href="####">三级权限</a></li>
						</ul>
					</li>
						<li>
						<a href="javascript:void(0)" class="open-btn close" type="close">
							<i class="menu-icon search"></i>
							<span class="menu-title">查询信息</span>
							<i class="menu-icon-down"></i>
						</a>
						<ul style="display: none;">
							<li><a href="####">一级权限</a></li>
							<li><a href="####">二级权限</a></li>
							<li><a href="####">三级权限</a></li>
						</ul>
					</li>
				</ul>
			</td>
			<td>
				<div class="part-title">欢迎首页</div>
				<div class="main-con">
					<div class="welcom-title">欢迎使用电商管理平台</div>
					<div class="welcom-title-sub">Welcom to user Busines management plateform</div>
					<div class="welcom-con"><img src="images/welcom.png"></div>
				</div>
			</td>
			<td width="390">
				<div class="close-open-btn"><a href="javascript:void(0)" type="open" id="line-btn"></a></div>
				<div class="notice">
					<div class="part-title">系统公告</div>
					<ul>
						<li>
							<div class="title">
								<span class="radio"></span>
								<a href="####">标题1</a>
								<i class="icon"></i>
								<span class="time">14:39</span>
								<div class="clear"></div>
							</div>
							<div class="sub-title">公布内容</div>
							<div class="desc">
								天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议
							</div>
						</li>
						<li>
							<div class="title">
								<span class="radio"></span>
								<a href="####">标题1</a>
								<i class="icon"></i>
								<span class="time">14:39</span>
								<div class="clear"></div>
							</div>
							<div class="sub-title">公布内容</div>
							<div class="desc">
								天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议
							</div>
						</li>
						<li>
							<div class="title">
								<span class="radio"></span>
								<a href="####">标题1</a>
								<i class="icon"></i>
								<span class="time">14:39</span>
								<div class="clear"></div>
							</div>
							<div class="sub-title">公布内容</div>
							<div class="desc">
								天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议
							</div>
						</li>
					</ul>
					<div class="part-title">我的任务</div>
					<ul>
						<li>
							<div class="title">
								<span class="radio"></span>
								<a href="####">标题1</a>
								<i class="icon"></i>
								<span class="time">14:39</span>
								<div class="clear"></div>
							</div>
							<div class="sub-title">公布内容</div>
							<div class="desc">
								天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议
							</div>
						</li>
						<li>
							<div class="title">
								<span class="radio"></span>
								<a href="####">标题1</a>
								<i class="icon"></i>
								<span class="time">14:39</span>
								<div class="clear"></div>
							</div>
							<div class="sub-title">公布内容</div>
							<div class="desc">
								天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议
							</div>
						</li>
						<li>
							<div class="title">
								<span class="radio"></span>
								<a href="####">标题1</a>
								<i class="icon"></i>
								<span class="time">14:39</span>
								<div class="clear"></div>
							</div>
							<div class="sub-title">公布内容</div>
							<div class="desc">
								天津市副局长今天出席会议天津市副局长今天出席会议天津市副局长今天出席会议
							</div>
						</li>
					</ul>
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="3"><div class="company-info"><img src="images/bottom-log.png">&nbsp;&nbsp;&nbsp;武汉华骏有限公司版权所有©1997-2015</div></td>
		</tr>
	</table>
</div>
</body>
<script type="text/javascript">
	$(function(){
		$("#line-btn").click(function(){
			var type = $(this).attr("type");
			var td = $(this).parent().parent();
			if(type=="open"){
				td.attr("width","5");
				td.find(".notice").hide();
				$(this).attr("type","close")
			}else{
				td.attr("width","390");
				td.find(".notice").show();
				$(this).attr("type","open")
			}
		});
		
		$("ul.menu a.open-btn").click(function(){
			var type = $(this).attr("type");
			var pli = $(this).parent();
			$(this).removeClass("open");
			$(this).removeClass("close");
			$("ul.menu li a").removeClass("hover");
			if(type=="close"){
				pli.find("ul").show();
				$(this).addClass("open");
				$(this).attr("type","open");
				$(this).addClass("hover");
			}else{
				pli.find("ul").hide();
				$(this).attr("type","close");
				$(this).addClass("close");
			}
		});
		
		$(".notice ul li").mouseover(function(){
			$(this).addClass("hover");
		});
		$(".notice ul li").mouseout(function(){
			$(this).removeClass("hover");
		});
		var bodyHeight = $(document).height();
		$(".close-open-btn").css({"marginTop":(bodyHeight/2)+"px"});
	})
</script>
</html>